<template>
  <div class="index-container" id="wrapper-scroll">
    <div class="header-container">
      <div
        class="header"
        :style="'padding-top:' + statusBarHeight + 'px'"
        :class="{ topNavBg: scrollTop != 0 }"
      >
        <div class="left">
          <img class="logo-pic" :src="require(`@/assets/img/logo-pic.png`)" />
        </div>
        <div class="right">
          <PortalSwitch></PortalSwitch>

          <img :src="require(`@/assets/img/scan.png`)" class="icon-scan" @click="goScanner()" />
        </div>
      </div>
      <fm-swipe
        class="my-swipe"
        :style="'padding-top:' + (statusBarHeight + 58) + 'px'"
        :autoplay="3000"
      >
        <fm-swipe-item v-for="(image, index) in images" :key="index">
          <img
            :src="image.imgSrc"
            style="width: 95%; height: 100%"
            @click="swipeImageClick(image)"
          />
        </fm-swipe-item>
      </fm-swipe>

      <fm-grid :column-num="4" class="grid" icon-size="52px" :border="false">
        <fm-grid-item
          v-for="(item, index) in quickAccessArea"
          :key="index"
          :icon="item.src"
          :text="$t(item.title)"
          @click="goTo(item)"
        />
        <!-- 更多按钮 -->
        <!-- <fm-grid-item :icon="moreItem.src" :text="$t(moreItem.title)" @click="goTo(moreItem.path)" /> -->
      </fm-grid>
    </div>
    <div class="bottom-container">
      <div class="cbe">
        <div class="cbe-title">
          <img class="cbe-logo" :src="require(`@/assets/img/cbe-logo.png`)" />
          <span>CBE模型</span>
        </div>
        <img class="cbe-pic" :src="require(`@/assets/img/cbe.png`)" @click="goCBE" />
      </div>
      <DataChart></DataChart>
      <div style="margin-top: 12px">
        <fm-cell class="news">
          <template #title>
            <div class="news-title">
              <img class="news-notice" :src="require(`@/assets/img/notice.png`)" />
              <span class="box">新闻通知</span>
            </div>
          </template>
          <!-- 使用 right-icon 插槽来自定义右侧图标 -->
          <template #right-icon>
            <div class="right" @click="goToNewsList">
              <span class="right-more">查看全部</span>
            </div>
          </template>
        </fm-cell>
      </div>
      <!-- 新闻模块 -->
      <div :class="quickAccessArea.length > 3 ? 'small-bottom-container' : 'big-bottom-container'">
        <!-- 列表项 -->
        <div
          class="list-item"
          v-for="(item, index) in formList"
          :key="index"
          @click="goToNewsInfo(item)"
        >
          <div class="list-item-title">
            {{ item.title }}
          </div>
          <div class="list-item-time">{{ item.createDate }}</div>
          <div class="divider"></div>
        </div>
      </div>
    </div>
    <tabbar></tabbar>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import tabbar from '@/modules/Tabbar/index'
// import { getToken } from "./SmartSite/api";
// import { encryptSM4 } from "@/utils/sm4";
import { GET_ENUMS } from '@/store/Action/actionTypes'
import { ALL_APP_LIST } from '@/common/constant'
import { SET_QUICK_ACCESS_AREA } from '@/store/Mutation/mutationTypes'
import { STATUS_BAR_HEIGHT } from '@/store/State/stateTypes'
import { eventBackButton, exitApp } from '@/utils/app'
import PortalSwitch from '@/components/portal-switch'
import DataChart from '@/components/data-chart'
import { Toast } from 'fawkes-mobile-lib'
export default {
  name: 'IndexPage',
  components: {
    tabbar,
    PortalSwitch,
    DataChart,
  },
  computed: {
    ...mapGetters(['quickAccessArea']),
    userName() {
      return this.$storage.get('username')
    },
    statusBarHeight() {
      return this.$store.state[STATUS_BAR_HEIGHT]
    },
  },
  data() {
    return {
      moreItem: {
        title: '更多',
        src: require('@assets/svg/more.svg'),
        path: '/more',
      },
      images: [
        {
          imgSrc: require(`@assets/img/mobile-lib.png`),
          title: '移动端组件库',
          url: 'http://172.20.79.29:9529/#/zh-CN/',
        },
        {
          imgSrc: require(`@assets/img/quick-start.png`),
          title: '凤翎官网',
          url: 'https://fawkes.cybereng.com/',
        },
      ],
      active: 0,
      formList: [
        {
          prjDepName: '渝西水资源配置工程',
          title: '重庆史上最大水利工程——渝西水资源配置工程全线开工 将惠及近千万市民',
          userFullname: '系统管理员',
          createDate: '2021-02-02 19:02',

          id: 0,
        },
        {
          prjDepName: '渝西水资源配置工程',
          title: '关于举办“⾮线性筹划⼤会委员会”的会议通',
          userFullname: '系统管理员',
          createDate: '2021-02-01 19:02',

          id: 1,
        },
        {
          prjDepName: '渝西水资源配置工程',
          title: '院内⼯会远远会选举⼤会通知',
          userFullname: '系统管理员',
          createDate: '2021-02-03 19:02',

          id: 2,
        },
      ],
      scrollTop: 0,
    }
  },
  created() {},
  watch: {},
  mounted() {
    //监听滚轮滚动事件
    window.addEventListener('scroll', this.handleScroll, true)
    // 初次进入默认菜单,若本地缓存存在应用列表
    if (this.$storage.get('quickAccessArea')) {
      this.$store.commit(SET_QUICK_ACCESS_AREA, JSON.parse(this.$storage.get('quickAccessArea')))
    } else {
      // 若无，从全部应用中获取默认应用
      this.$store.commit(
        SET_QUICK_ACCESS_AREA,
        ALL_APP_LIST.filter((app) => app.isFixed)
      )
    }

    // document.addEventListener('scroll', this.scroll)
    // 因屏蔽了视频监控模块而注释
    // let data = {
    //   grant_type: "password",
    //   scope: "all",
    //   username: "zhu_yp2",
    //   password: encryptSM4("shangyu@2021!@#"),
    // };

    // getToken(data).then((res) => {
    //   this.$storage.set("longtang_token", res.access_token);
    // });
    // 字典查询
    this.$store.dispatch(GET_ENUMS)
  },
  activated() {
    // 页面激活时移除默认的返回上一级路由处理事件，设置退出应用事件
    document.removeEventListener('backbutton', this.$back, false)
    document.addEventListener('backbutton', eventBackButton, false)
  },
  deactivated() {
    // 页面隐藏时移除退出应用事件，恢复默认的返回上一级路由的处理事件
    document.removeEventListener('backbutton', eventBackButton, false)
    document.removeEventListener('backbutton', exitApp, false)
    document.addEventListener('backbutton', this.$back, false)
  },
  methods: {
    goCBE() {
      this.$router.push({
        path: '/cbe',
      })
    },
    goScanner() {
      this.$router.push({
        path: '/scanner',
      })
    },
    goTo(data) {
      if (data.title === '组件库') {
        this.$router.push({
          path: '/iframePage',
          query: {
            title: '移动端组件库',
            url: data.path,
          },
        })
        return
      }
      if (data.title === '视频监控') {
        if (typeof yuanchu != 'undefined') {
          yuanchu?.hikVideoPlayer?.preview({
            url: 'rtsp://183.134.221.24:554/openUrl/e2Xm7ja',
            playbackUrl: 'rtsp://183.134.221.24:554/openUrl/e2Xm7ja',
          })
        }
      }
      if (data.title === '小程序') {
        if (typeof yuanchu != 'undefined') {
          const id = 'demo_yx'
          const name = 'MyDemo'
          const iconUrl = 'https://yxweb.hdec.com:8081/mobile-test1/mini/icon.png'
          const url = 'https://fawkes.cybereng.com/#/'
          const data = {
            id,
            name,
            iconUrl,
            url,
          }
          yuanchu?.miniTask?.openMini(data, (err) => {
            Notify({ type: 'error', message: `小程序打开失败：${err}` })
          })
        }
      }
      if (data.path !== '') {
        this.$router.push(data.path)
      } else {
        Toast('开发中')
      }
    },
    // 跳转新闻列表
    goToNewsList() {
      this.$router.push('/news')
    },
    // 跳转新闻详情
    goToNewsInfo(item) {
      this.$router.push({
        name: 'newsInfo',
        params: { id: item.id },
      })
    },
    swipeImageClick(data) {
      this.$router.push({
        path: '/iframePage',
        query: {
          title: data.title,
          url: data.url,
        },
      })
    },
    handleScroll() {
      if (!document.getElementById('wrapper-scroll')) {
        return
      }

      this.scrollTop = document.getElementById('wrapper-scroll').scrollTop
    },
  },
}
</script>
<style lang="less" scoped>
// 金刚区
/deep/.fm-dropdown-menu__bar {
  background: transparent;
  box-shadow: none;
}
.title {
  font-weight: bold;
  font-size: 36px;
  color: #fff;
}
.header {
  padding: 0 32px;
  padding-bottom: 24px;
  width: 92%;
  z-index: 9999;
  position: fixed;
  min-height: 96px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: flex-end;
  background-color: transparent;
  .left {
    display: flex;
    align-items: flex-end;
  }
  .logo-pic {
    width: 252px;
    height: 32px;
    margin-right: 16px;
  }
  .right {
    display: flex;
    align-items: flex-end;
    .icon-scan {
      width: 40px;
      height: 40px;
      margin-left: 24px;
    }
  }
}

.topNavBg {
  background-color: #ffffff;
}

// /deep/.fm-grid-item__content::after {
//   border: none;
// }
/deep/.fm-cell::after {
  border: none;
}
.index-container {
  background-color: #f7f8fa;
  height: calc(100% - 164px);
  height: calc(100% - 164px);
  display: flex;
  flex-direction: column;
  overflow: scroll;
  //隐藏滚动条
  scrollbar-width: none; //firefox
  -ms-overflow-style: none; //IE 10+

  //隐藏滚动条
  &::-webkit-scrollbar {
    display: none; //Chrome | Safari
  }
}
.header-container {
  width: 100%;
  background: linear-gradient(180deg, #cbd7fa 0%, rgba(204, 215, 250, 0.36) 42%, #fff);
}
.my-swipe {
  width: 720px;
  height: 200px;
  text-align: center;
  margin: 0 auto;
}
.my-swipe .fm-swipe-item {
  width: 100%;
  height: 100%;
}
.grid {
  margin: 26px 0 12px 0;
  text-align: center;
}
/deep/.fm-grid-item__text {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

/deep/.fm-grid-item__icon + .fm-grid-item__text {
  margin-top: 0 !important;
}
.cbe {
  width: 100%;
  height: 386px;
  background: #ffffff;
  border-radius: 16px;
  margin: 24px 0;
  .cbe-title {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    padding: 38px 0 0 32px;
    .cbe-logo {
      width: 40px;
      height: 40px;
      margin-right: 16px;
    }
    > span {
      height: 50px;
      font-size: 36px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 600;
      color: #15171a;
      line-height: 50px;
    }
  }

  .cbe-pic {
    width: 722px;
    height: 276px;
    margin-left: 14px;
  }
}
.tab-active {
  color: #027aff;
  text-align: center;
  font-weight: 500;
  font-size: 32px;
}
.tab-active::after {
  content: '';
  display: block;
  position: absolute;
  bottom: 10px;
  height: 3px;
  width: 70px;
  background-color: #027aff;
}
.big-bottom-container {
  height: calc(100% - 670px);
  overflow: auto;
}
// .small-bottom-container {
//   height: calc(100% - 910px);
//   overflow: auto;
// }

/deep/.fm-cell {
  padding: 38px 32px 18px 32px;
  background-color: #fff;
  border-radius: 16px 16px 0 0;
}

.news-title {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  .news-notice {
    width: 40px;
    height: 40px;
    margin-right: 8px;
  }
  .box {
    height: 40px;
    font-size: 36px;
    font-family: PingFangSC-Medium, PingFang SC;
    color: #15171a;
    line-height: 40px;
    font-weight: 600;
  }
}

.show-more {
  color: #555555;
  font-size: 28px;
  font-family: PingFangSC-Regular, PingFang SC;
}
.more-box {
  line-height: 1.6;
  width: 100%;
}
/deep/.fm-cell__title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 2;
}
.fm-cell {
  align-items: center;
}
/deep/.fm-swipe__indicator {
  background-color: #bbb;
  width: 16px;
  height: 16px;
  opacity: 1;
}
/deep/.fm-swipe__indicator--active {
  background-color: #027aff;
  opacity: 1;
}
.list-item {
  padding: 0 46px 0 32px;
  background-color: #fff;
  .list-item-title {
    padding: 16px 0;
    font-size: 28px;
    font-weight: 500;
    color: #333333;
    font-family: PingFangSC-Medium, PingFang SC;
    width: 672px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
  }
  .list-item-time {
    font-size: 24px;
    font-weight: 500;
    color: #999999;
  }
  .divider {
    margin-top: 16px;
    width: 718px;
    height: 2px;
    background: #eeeeee;
    text-align: center;
  }
}

[class*='fm-hairline']::after {
  border: none;
}
/deep/.fm-grid-item__content {
  background: transparent;
  padding: 16px 0 !important;
}
/deep/.fm-grid-item__text {
  font-size: 24px;
  line-height: 34px;
  font-family: PingFangSC-Regular, PingFang SC;
  color: #555555;
}
/deep/.fm-grid {
  align-items: flex-start;
  padding: 0 6px;
}
.empty {
  height: 16px;
  background-color: #f2f3f4;
}
.right {
  display: flex;
  align-items: center;
}
.right-more {
  font-size: 24px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #4545d1;
  line-height: 34px;
}

//重定义轮播图样式
/deep/.fm-swipe__indicator {
  width: 20px;
  height: 6px;
  border-radius: 5px;
}

/deep/.fm-swipe__indicator--active {
  width: 20px;
  height: 6px;
  border-radius: 5px;
  background-color: #4545e3;
}
</style>
